<template>
	<view class="fixed l-0 b-0  flex" :style="{ width: _width + 'px', height: _totalBarHeight + 'px',transform:`translateY(${props.bottom}rpx)` }">
		<!-- 			@click="emits('click', $event)"    -->
		<view class="relative" style="top:15px;">
			<tm-sheet
				:blur="_blur"
				:color="props.color"
				parenClass="relative"
				class="relative"
				:followTheme="props.followTheme"
				:dark="props.dark"
				:round="props.round"
				:shadow="props.shadow"
				:outlined="props.outlined"
				:border="0"
				borderDirection="top"
				:text="props.text"
				:transprent="false"
				:linear="props.linear"
				:linearDeep="props.linearDeep"
				:margin="[0, 0]"
				:padding="[0, 0]"
				:height="_BarHeight"
				:width="_width"
				unit="px"
			></tm-sheet>
		</view>
		<view class="absolute flex flex-col l-0 " :style="{ width: _width + 'px', height: _totalBarHeight + 'px'}">
			<view class="relative barcont flex flex-row flex-row-top-center flex-around flex-1" 
			:style="{ width: _width + 'px'}"><slot></slot></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
/**
 * 底部导航栏
 * @description 内部只能放置,tm-tabbar-item
 */
import tmSheet from '../tm-sheet/tm-sheet.vue';
import tmText from '../tm-text/tm-text.vue';
import tmIcon from '../tm-icon/tm-icon.vue';
import { custom_props } from '../../tool/lib/minxs';
import { getCurrentInstance, computed,Ref, ref, provide, inject, onUpdated, onMounted, onUnmounted, nextTick, watch, PropType } from 'vue';
import { useTmpiniaStore } from '../../tool/lib/tmpinia';
const store = useTmpiniaStore();
const emits = defineEmits(["change","update:active"])
const props = defineProps({
	...custom_props,
	transprent: {
		type: [Boolean],
		default: false
	},
	color: {
		type: [String],
		default: 'white'
	},
	text: {
		type: [Boolean],
		default: false
	},
	round: {
		type: [Number],
		default: 0
	},
	shadow: {
		type: [Number],
		default: 0
	},
	//如果为0取当前窗口宽度。
	width:{
		type: [Number],
		default: 0
	},
	//底部偏移
	bottom:{
		type: [Number],
		default: 0
	},
	//是否显示安全区域
	showSafe:{
		type: [Boolean],
		default: false
	},
	//动态激活项的索引-1表示不激活任何项。
	active:{
		type:Number,
		default:-1
	},
	//是否自动选中。如果禁用，则用户通过active来切换选中值，否则，点击项目时自动选中。
	autoSelect:{
		type:Boolean,
		default:true
	}
	
});
let sys = uni.getSystemInfoSync();
const _width = uni.upx2px(props.width)||(sys?.windowWidth??0);
const _blur = computed(()=>props.blur)
const _activeUrl= ref("")
const _activeUid= ref("")
const tmTabbarId = "tmTabbarId";
const _cachlist:Ref<Array<string|number>> = ref([])
const _showSafe = ref(props.showSafe)
const _activeIndex = ref(props.active)
const win_bottom =sys?.safeAreaInsets?.bottom??0;
if(win_bottom>0){
	_showSafe.value = true;
}

const _totalBarHeight = computed(()=>{
	if(_showSafe.value) return 90;
	return 75
})
const _BarHeight = computed(()=>{
	if(_showSafe.value) return 75;
	return 60
})
function setNowurl(url:string,nowuid:number){
	_activeUrl.value = url;
	_activeUid.value = String(nowuid);
}
function pushKey(uid:number){
	_cachlist.value = [...new Set([..._cachlist.value,uid])]
}
function delKey(uid:number){
	_cachlist.value = _cachlist.value.filter(el=>el!=uid)
}
defineExpose({tmTabbarId,setNowurl,pushKey,delKey})
provide('tmTabbarUrl',computed(()=>_activeUrl.value))
provide('tmTabbarUid',computed(()=>_activeUid.value))
provide('tmTabbarWidth',computed(()=>Math.ceil(_width/_cachlist.value.length)))
provide('tmTabbarItemList',computed(()=>_cachlist.value))
provide('tmTabbarItemActive',computed(()=>_activeIndex.value))
provide('tmTabbarItemSafe',_showSafe.value)
provide('tmTabbarItemAutoSelect',computed(()=>props.autoSelect))
watch(()=>props.active,()=>{
	
	if(props.active == _activeIndex.value) return;
	_activeIndex.value = props.active
})
watch(_activeIndex,()=>{
	emits("change",_activeIndex.value)
	emits("update:active",_activeIndex.value)
})
</script>

<style>
/* #ifdef APP-NVUE */
.barcont {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}
/* #endif */
/* #ifndef APP-NVUE */
.barcont {
	display: flex;
	flex-direction: row !important;
	justify-content: space-around !important;
	align-items: flex-start;
}
/* #endif */
</style>
